import React from 'react';
import { formatRangeTime } from '../../../utils';
import styles from './index.less';

function TimeList({ dataSource = [] }) {
    const [more, setMore] = React.useState(false);

    return (
        <div className={styles.timeListWrap}>
            {dataSource
                .filter((_, index) => more || index < 4)
                .map(item => (
                    <div className={styles.timeItem} key={item.startTime}>
                        {formatRangeTime(item.startTime, item.endTime)}
                    </div>
                ))}
            {dataSource.length > 4 && !more && (
                <div className={styles.more} onClick={() => setMore(true)}>
                    查看全部
                </div>
            )}
        </div>
    );
}

export default TimeList;
